import QtQuick
import FluentUI

// Dock栏
FluRectangle {
    radius: [25, 25, 25, 25]
    width: mainWindow.width * 0.13
    height: mainWindow.height * 0.95
    color: "#FFFFFF"

    // Dock栏文字
    Text {
        id: textDock
        y: mainWindow.height * 0.02
        anchors.horizontalCenter: parent.horizontalCenter
        text: "面试系统"
        font.pointSize: 15 * fontSizeFactor
        font.family: "MiSans"
        color: "#000000"
    }

    property var moveY: 0

    // 菜单矩形
    Rectangle {
        id: menuRect
        y: textDock.height + mainWindow.height * 0.05
        width: parent.width
        height: parent.height * 0.8
        color: "transparent"

        Column {
            anchors.fill: parent
            spacing: parent.height * 0.02
            // 首页按钮
            FluTextButton {
                Row {
                    anchors.fill: parent
                    // 占位
                    Rectangle {
                        width: parent.width * 0.15
                        height: parent.height
                        color: "transparent"
                    }
                    FluImage {
                        anchors.verticalCenter: parent.verticalCenter
                        height: parent.height * 0.45
                        fillMode: Image.PreserveAspectFit
                        source: "qrc:/image/image/HomeIcon.png"
                    }
                    // 占位
                    Rectangle {
                        width: parent.width * 0.1
                        height: parent.height
                        color: "transparent"
                    }
                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        text: "首页"
                        font.pointSize: 10 * fontSizeFactor
                        font.family: "MiSans"
                        color: "#718096"
                    }
                }
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width * 0.9
                height: menuRect.height * 0.08
                backgroundHoverColor: "#F3F8FF"
                backgroundPressedColor: "#EBF3FF"
                onClicked: {
                    if (moveRectAnimation.running) {
                        moveRectAnimation.running = false
                    }
                    moveRectAnimation.to = y
                    moveRectAnimation.from = moveRect.y
                    moveRectAnimation.start()
                    mainWindow.currentPage = "home";
                }
            }

            // 模拟面试按钮
            FluTextButton {
                Row {
                    anchors.fill: parent
                    // 占位
                    Rectangle {
                        width: parent.width * 0.15
                        height: parent.height
                        color: "transparent"
                    }
                    FluImage {
                        anchors.verticalCenter: parent.verticalCenter
                        height: parent.height * 0.45
                        fillMode: Image.PreserveAspectFit
                        source: "qrc:/image/image/InterviewIcon.png"
                    }
                    // 占位
                    Rectangle {
                        width: parent.width * 0.1
                        height: parent.height
                        color: "transparent"
                    }
                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        text: "模拟面试"
                        font.pointSize: 10 * fontSizeFactor
                        font.family: "MiSans"
                        color: "#718096"
                    }
                }
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width * 0.9
                height: menuRect.height * 0.08
                backgroundHoverColor: "#F3F8FF"
                backgroundPressedColor: "#EBF3FF"
                onClicked: {
                    if (moveRectAnimation.running) {
                        moveRectAnimation.running = false
                    }
                    moveRectAnimation.to = y
                    moveRectAnimation.from = moveRect.y
                    moveRectAnimation.start()
                    mainWindow.currentPage = "interview";
                }
            }

            // 应用中心按钮
            FluTextButton {
                Row {
                    anchors.fill: parent
                    // 占位
                    Rectangle {
                        width: parent.width * 0.15
                        height: parent.height
                        color: "transparent"
                    }
                    FluImage {
                        anchors.verticalCenter: parent.verticalCenter
                        height: parent.height * 0.45
                        fillMode: Image.PreserveAspectFit
                        source: "qrc:/image/image/ApplicationIcon.png"
                    }
                    // 占位
                    Rectangle {
                        width: parent.width * 0.1
                        height: parent.height
                        color: "transparent"
                    }
                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        text: "应用中心"
                        font.pointSize: 10 * fontSizeFactor
                        font.family: "MiSans"
                        color: "#718096"
                    }
                }
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width * 0.9
                height: menuRect.height * 0.08
                backgroundHoverColor: "#F3F8FF"
                backgroundPressedColor: "#EBF3FF"
                onClicked: {
                    if (moveRectAnimation.running) {
                        moveRectAnimation.running = false
                    }
                    moveRectAnimation.to = y
                    moveRectAnimation.from = moveRect.y
                    moveRectAnimation.start()
                    mainWindow.currentPage = "application";
                }
            }

            // 详细报告按钮
            FluTextButton {
                Row {
                    anchors.fill: parent
                    // 占位
                    Rectangle {
                        width: parent.width * 0.15
                        height: parent.height
                        color: "transparent"
                    }
                    FluImage {
                        anchors.verticalCenter: parent.verticalCenter
                        height: parent.height * 0.45
                        fillMode: Image.PreserveAspectFit
                        source: "qrc:/image/image/ReportIcon.png"
                    }
                    // 占位
                    Rectangle {
                        width: parent.width * 0.1
                        height: parent.height
                        color: "transparent"
                    }
                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        text: "详细报告"
                        font.pointSize: 10 * fontSizeFactor
                        font.family: "MiSans"
                        color: "#718096"
                    }
                }
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width * 0.9
                height: menuRect.height * 0.08
                backgroundHoverColor: "#F3F8FF"
                backgroundPressedColor: "#EBF3FF"
                onClicked: {
                    if (moveRectAnimation.running) {
                        moveRectAnimation.running = false
                    }
                    moveRectAnimation.to = y
                    moveRectAnimation.from = moveRect.y
                    moveRectAnimation.start()
                    mainWindow.currentPage = "report";
                }
            }

            // 占位Rectangle
            FluRectangle {
                width: parent.width
                height: mainWindow.width * 0.05
                color: "transparent"
            }

            // 设置按钮
            FluTextButton {
                Row {
                    anchors.fill: parent
                    // 占位
                    Rectangle {
                        width: parent.width * 0.15
                        height: parent.height
                        color: "transparent"
                    }
                    FluImage {
                        anchors.verticalCenter: parent.verticalCenter
                        height: parent.height * 0.45
                        fillMode: Image.PreserveAspectFit
                        source: "qrc:/image/image/SetIcon.png"
                    }
                    // 占位
                    Rectangle {
                        width: parent.width * 0.1
                        height: parent.height
                        color: "transparent"
                    }
                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        text: "设置"
                        font.pointSize: 10 * fontSizeFactor
                        font.family: "MiSans"
                        color: "#718096"
                    }
                }
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width * 0.9
                height: menuRect.height * 0.08
                backgroundHoverColor: "#F3F8FF"
                backgroundPressedColor: "#EBF3FF"
                onClicked: {
                    if (moveRectAnimation.running) {
                        moveRectAnimation.running = false
                    }
                    moveRectAnimation.to = y
                    moveRectAnimation.from = moveRect.y
                    moveRectAnimation.start()
                    mainWindow.currentPage = "set";
                }
            }

            // 帮助中心按钮
            FluTextButton {
                Row {
                    anchors.fill: parent
                    // 占位
                    Rectangle {
                        width: parent.width * 0.15
                        height: parent.height
                        color: "transparent"
                    }
                    FluImage {
                        anchors.verticalCenter: parent.verticalCenter
                        height: parent.height * 0.45
                        fillMode: Image.PreserveAspectFit
                        source: "qrc:/image/image/HelpIcon.png"
                    }
                    // 占位
                    Rectangle {
                        width: parent.width * 0.1
                        height: parent.height
                        color: "transparent"
                    }
                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        text: "帮助中心"
                        font.pointSize: 10 * fontSizeFactor
                        font.family: "MiSans"
                        color: "#718096"
                    }
                }
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width * 0.9
                height: menuRect.height * 0.08
                backgroundHoverColor: "#F3F8FF"
                backgroundPressedColor: "#EBF3FF"
                onClicked: {
                    if (moveRectAnimation.running) {
                        moveRectAnimation.running = false
                    }
                    moveRectAnimation.to = y
                    moveRectAnimation.from = moveRect.y
                    moveRectAnimation.start()
                    mainWindow.currentPage = "help";
                }
            }

            // 占位Rectangle
            FluRectangle {
                width: parent.width
                height: mainWindow.width * 0.1
                FluRectangle {
                    anchors.horizontalCenter: parent.horizontalCenter
                    y: parent.height * 0.2
                    width: parent.width * 0.8
                    height: parent.height * 0.8
                    radius: [15, 15, 15, 15]
                    color: "#EBF3FF"
                }
                Column {
                    anchors.fill: parent
                    spacing: parent.height * 0.10
                    FluImage {
                        anchors.horizontalCenter: parent.horizontalCenter
                        width: parent.width * 0.5
                        fillMode: Image.PreserveAspectFit
                        source: "qrc:/image/image/OnlineSupport.png"
                    }
                    FluFilledButton {
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: "在线支持"
                        font.pointSize: 10 * fontSizeFactor
                        font.family: "MiSans"
                        textColor: "#FFFFFF"
                        normalColor: "#3F8CFF"
                    }
                }
            }

            // 占位Rectangle
            FluRectangle {
                width: parent.width
                height: mainWindow.width * 0.01
                color: "transparent"
            }

            // 退出按钮
            FluTextButton {
                Row {
                    anchors.fill: parent
                    // 占位
                    Rectangle {
                        width: parent.width * 0.15
                        height: parent.height
                        color: "transparent"
                    }
                    FluImage {
                        anchors.verticalCenter: parent.verticalCenter
                        height: parent.height * 0.45
                        fillMode: Image.PreserveAspectFit
                        source: "qrc:/image/image/ExitIcon.png"
                    }
                    // 占位
                    Rectangle {
                        width: parent.width * 0.1
                        height: parent.height
                        color: "transparent"
                    }
                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        text: "退出"
                        font.pointSize: 10 * fontSizeFactor
                        font.family: "MiSans"
                        color: "#718096"
                    }
                }
                anchors.horizontalCenter: parent.horizontalCenter
                width: parent.width * 0.9
                height: menuRect.height * 0.08
                backgroundHoverColor: "#F3F8FF"
                backgroundPressedColor: "#EBF3FF"
                onClicked: {
                    if (moveRectAnimation.running) {
                        moveRectAnimation.running = false
                    }
                    moveRectAnimation.to = y
                    moveRectAnimation.from = moveRect.y
                    moveRectAnimation.start()
                    mainWindow.currentPage = "exit";
                }
            }
        }
        // 滑块矩形
        FluRectangle {
            id: moveRect
            width: menuRect.width * 0.03
            height: menuRect.height * 0.08
            radius: [3, 3, 3, 3]
            color: "#3F8CFF"
            // 将滑块放置在矩形的右侧
            x: menuRect.width - width

            // 动画，用于平滑移动矩形
            SpringAnimation {
                id: moveRectAnimation
                target: moveRect
                properties: "y"
                spring: 5
                damping: 0.3
                duration: 500
            }
        }
    }
}
